<template>
  <div>
    <div
      style="
        background-color: rgb(239, 239, 244);
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div style="display: flex">
        <div>
          <img
            src="../../assets/img/xiaoshou007.png"
            alt=""
            style="width: 75px; height: 60px; margin-left: 10px"
          />
        </div>
        <div style="font-size: 20px; margin-left: 10px; margin-top: 20px">
          流程:创建 - 发票创建
        </div>
      </div>
      <div style="display: flex; align-items: center">
        <div>
          <el-button type="primary" size="mini" @click="submit()"
            >提交</el-button
          >
        </div>
        <div style="margin-left: 20px">
          <el-button type="primary" size="mini">保存</el-button>
        </div>
        <div>
          <div>
            <img
              src="../../assets/img/sq.png"
              alt=""
              style="
                background-color: rgb(200, 200, 200);
                margin-top: 4px;
                margin-left: 20px;
                margin-right: 10px;
              "
            />
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="发票创建" name="first">
          <div style="width: 80%; margin: 0 auto; margin-top: 10px">
            <div
              style="
                width: 100%;
                height: 50px;
                font-size: 24px;
                text-align: center;
                line-height: 50px;
              "
            >
              发票创建
            </div>
            <div
              style="
                width: 100%;
                height: 30px;
                font-size: 10px;
                text-align: center;
                line-height: 30px;
              "
            >
              Seal application form
            </div>
          </div>
          <hr />
          <div
            style="
              font-size: 20px;
              color: rgb(43, 106, 201);
              background-color: rgb(239, 239, 244);
              height: 40px;
              line-height: 40px;
              margin-top: 20px;
              width: 96%;
              margin: 0 auto;
              margin-bottom: 20px;
            "
          >
            | 基本信息
          </div>
          <div style="width: 96%; margin: 0 auto">
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item label="相关项目">
                <el-input v-model="form.relevantProject"></el-input>
              </el-form-item>
              <el-form-item label="负责人">
                <el-input v-model="form.principal"></el-input>
              </el-form-item>
              <el-form-item label="开票日期">
                <el-date-picker
                  v-model="form.invoiceDate"
                  type="date"
                  placeholder="创建时间"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="发票号码">
                <el-input v-model="form.invoiceNumber"></el-input>
              </el-form-item>
              <el-form-item label="单价">
                <el-input v-model="form.price"></el-input>
              </el-form-item>
              <el-form-item label="数量">
                <el-input v-model="form.quantity"></el-input>
              </el-form-item>
              <el-form-item label="总价">
                <el-input v-model="form.totalPrice"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <hr />
        </el-tab-pane>
        <el-tab-pane label="发票展示" name="second">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="border: 1px solid black; width: 82%; margin-right: 20px"
          ></el-input>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh-left">重置</el-button>
          <el-table :data="requireData" style="width: 100%">
            <el-table-column prop="relevantProject" label="相关项目">
            </el-table-column>
            <el-table-column prop="principal" label="负责人"> </el-table-column>
            <el-table-column prop="invoiceDate" label="开票日期">
            </el-table-column>
            <el-table-column prop="invoiceNumber" label="发票号码">
            </el-table-column>
            <el-table-column prop="price" label="单价"> </el-table-column>
            <el-table-column prop="quantity" label="数量"> </el-table-column>
            <el-table-column prop="totalPrice" label="总价"> </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { addInvoice, selectInvoice } from "../../api/invoice";
export default {
  mounted() {
    this.selectInvoice();
    this.addInvoice();
  },
  data() {
    return {
      activeName: "first",
      form: {
        relevantProject: "",
        principal: "",
        invoiceDate: "",
        invoiceNumber: "",
        supplier: "",
        price: "",
        quantity: "",
        totalPrice: "",
      },
      active: 0,
      requireData: [],
    };
  },
  methods: {
    selectInvoice() {
      selectInvoice().then((res) => {
        console.log(res);
        this.requireData = res.result;
      });
    },
    submit() {
      const formData = {
        relevantProject: this.form.relevantProject,
        principal: this.form.principal,
        invoiceDate: moment(this.form.invoiceDate).format("YYYY-MM-DD"),
        invoiceNumber: this.form.invoiceNumber,
        price: this.form.price,
        quantity: this.form.quantity,
        totalPrice: this.form.totalPrice,
      };
      console.log(formData);
      addInvoice(formData).then((res) => {
        if(res.code == 200){
          console.log(res);
          this.$message({
              message: '新增成功',
              type: 'success'
            });
        }
        
      });
    },
  },
};
</script>

<style>
</style>
